<template>
  <!-- 地区 -->
  <div
    class="areaNational"
    v-title
    :data-title="$t('router.areaNationalTitle')"
  >
    <v-nav></v-nav>
    <div class="tag-lang">
      <router-link
        v-for="item of areaFilter"
        :key="item.id"
        :to="item.url"
        tag="li"
      >
        {{ $i18n.locale === "zh" ? item.labelCname : item.labelName }}
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
import vNav from "@/components/common/header/Nav";
export default {
  data() {
    return {
      //地区
      areaFilter: [
        {
          id: 1,
          labelCname: "按区域浏览",
          labelName: "Browse by Region",
          url: "world",
        },
        {
          id: 2,
          labelCname: "按字母浏览",
          labelName: "Browse by letter",
          url: "en",
        },
      ],
    };
  },
  components: {
    vNav,
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.tag-lang {
  li {
    &.router-link-active {
      background: #a1322c;
      color: #ffffff;
    }
  }
}
</style>
